import React from 'react'
import { renderToString } from 'react-dom/server'
import { StaticRouter } from 'react-router-dom'
import { renderRoutes } from 'react-router-config'
import { Provider } from 'react-redux'
import { Helmet } from 'react-helmet'



export const render = (store, routes, req, context) => {

    const content = renderToString(
        <Provider store={store}>
            <StaticRouter location={req.path} context={context}>
                <div>
                    {renderRoutes(routes)}
                </div>
            </StaticRouter>
        </Provider>
    );

    const helmet = Helmet.renderStatic();


    let css_str = context.css.length ? context.css.join('\n') : '';
    return `
        <html>
            <head>
                ${helmet.title.toString()}
                <style>${css_str}</style>
            </head>
            <body>
                react ssr
                <div id="root">${content}</div>
                <script>
                    window._context = {
                        state:${JSON.stringify(store.getState())}
                    }
                </script>
                <script src="/client.bundle.js"></script>
            </body>
        </html>
`
}